<template>
  <div class="containerWrap" ref="map">

    <!-- 地图 -->
    <div id="container"></div>

    <!-- 锚点类型面板 -->
    <marker-panel
      class="panelWrap"
      :markerSetData='markerSetData'
      v-model="showUlFlag"
      @selectIcon="showSelectIcon"
      @showList="showList">
    </marker-panel>
  </div>
</template>
<script>
  import markerPanel from './panel'
  export default {
    data () {
      return {
        map: '',
        markerSetData: {
          recordList: [],
          maximum: 6
        },
        massMarks: '',
        massMarksData: [],
        showUlFlag: false,
        anchorsIconUrlList: [],
        pointerCheckedList: ''
      }
    },
    components: {
      markerPanel
    },
    mounted () {
      this.init()
    },
    methods: {
      mapInit () {
        this.map = new AMap.Map('container', {
          resizeEnable: true,
          zoom: 10,
          center: [107.8838, 25.412239],
          mapStyle: 'amap://styles/d3fc11529eaf1d820d9d1d79da8a104c', // 设置地图的显示样式
          viewMode: '2D' // 使用3D视图
        })
        this.map.on('resize', (e) => {
          this.maximumInit()
        })
      },
      /**
       * 获取锚点
       * @author chend(cdhahaha@163.com)
       * @createDate 2018-09-03
       * @param      {String}   type
       */
      getMarkers ({anchorTypeId, showUnLink = 'T', showUnEdit = 'T', mapScaleList = []} = {}) {
        let mapBounds = this.map.getBounds()
        let actualMapScale = parseInt(this.map.getZoom())
        let tmpbounds = {}
        this.oldMapBounds = anchorTypeId ? this.oldMapBounds : null
        if (!mapBounds) return
        tmpbounds.isMapModel2d = 'T'
        if (this.map.AmbientLight) {
          mapBounds = this.$utils.covertToRect(mapBounds.bounds[0], mapBounds.bounds[1], mapBounds.bounds[2], mapBounds.bounds[3])
          tmpbounds.isMapModel2d = 'F'
        }
        tmpbounds.anchorTypeId = anchorTypeId
        tmpbounds.actualMapScale = this.$utils.MAPSCALEMAP[actualMapScale]
        tmpbounds.isShowNotRelation = showUnLink
        tmpbounds.isShowNotEdit = showUnEdit
        tmpbounds.mapScaleList = mapScaleList
        tmpbounds.nowLatitudeEnd = mapBounds.northeast.lat
        tmpbounds.nowLatitudeStart = mapBounds.southwest.lat
        tmpbounds.nowLongitudeEnd = mapBounds.northeast.lng
        tmpbounds.nowLongitudeStart = mapBounds.southwest.lng
        tmpbounds.oldLatitudeEnd = this.oldMapBounds && this.oldMapBounds.northeast.lat
        tmpbounds.oldLatitudeStart = this.oldMapBounds && this.oldMapBounds.southwest.lat
        tmpbounds.oldLongitudeEnd = this.oldMapBounds && this.oldMapBounds.northeast.lng
        tmpbounds.oldLongitudeStart = this.oldMapBounds && this.oldMapBounds.southwest.lng
        this.$request.anchorPointMoreListGet(tmpbounds).then(res => {
          this.oldMapBounds = mapBounds
          this.isMarkerInMap(res.resultList)
        })
      },
      isMarkerInMap (markers) {
        markers.map(extData => {
          this.setMarker(extData)
        })
        if (massMarks) {
          this.massMarks.setData(this.massMarksData)
        } else {
          var massMarks = new AMap.MassMarks(this.massMarksData, {
            style: this.anchorsIconUrlList
          })
          massMarks.setMap(this.map)
        }
      },
      setMarker (extData) {
        var marker = {
          lnglat: [extData.longitude, extData.latitude],
          name: extData.anchorName,
          id: extData.anchorTypeId,
          style: this.anchorsIconUrlList.indexOf(extData.anchorTypeId) + 1
        }
        log
        this.massMarksData.push(marker)
      },
      showSelectIcon (data) {
        console.log('showSelectIcon', data)
        data.forEach(v => {
          this.getMarkers({anchorTypeId: v})
        })
      },
      showList (data) {
        console.log('showList', data)
      },
      /**
       * 获取锚点类型
       * @author chend(cdhahaha@163.com)
       * @createDate 2018-08-31
       */
      async getAnchorTypeQuery () {
        await this.$request.dictDetailList({dictCode: 'MAP_SCALE'}).then(dicRes => {
          this.mapScaleArr = dicRes
        })
        this.$request.anchorType2DListGet().then(res => {
          res.recordList.map(v => {
            var styleObject = {
              url: v.anchorIconUrl,
              size: new AMap.Size(30, 30),
              anchor: new AMap.Pixel(-36, -36)
            }
            v.msgs = this.mapScaleArr
            v.showCheck = ['showName', 'showUnLink', 'showUnEdit']
            v.showList = []
            v.showAll = []
            this.anchorsIconUrlList.push(styleObject)
            return v
          })
          this.markerSetData.recordList = res.recordList
        })
      },
      /**
       * 锚点类型最大展示数
       * @author chend(cdhahaha@163.com)
       * @createDate 2018-09-03
       */
      maximumInit () {
        this.markerSetData.maximum = Math.floor((this.$refs.map.clientWidth - 140) / 80)
      },
      init () {
        this.mapInit()
        this.maximumInit()
        this.getAnchorTypeQuery()
      }
    }
  }
</script>
<style rel="stylesheet/less" lang="less">
  .containerWrap {
    position: absolute;
    width: 100%;
    height: 100%;
    #container {
      width: 100%;
      height: 100%;
    }
    .panelWrap {
      position: absolute;
      z-index: 999;
      bottom: 50px;
      left: 50px;
    }
  }
</style>